<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租房</title>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/newdetails.css">
    <link rel="shortcut icon" href="../img/ifont.png">
    <link rel="stylesheet" href="../details_iconfont/iconfont.css">
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/listFilter.js"></script>
    <link rel="stylesheet" href="../css/dawanqu/dwq.css">
</head>

<body>
    <!-- vue挂载 -->
    <div class="vue" id="vue">
        <!-- 顶部导航栏 -->
        <header>
            <div class="nav1">
                <div class="navl">
                    <ul class="navl-ul">
                        <li class="navl-li">
                            <a href="index.html">首页</a>
                        </li>
                        <li class="navl-li">
                            <a href="houseList.html">二手房</a>
                            <ul id="navl-ull" style="z-index: 10;">
                                <li><a href="houseList.html">房源</a></li>
                                <li><a href="community.html">小区</a></li>
                                <li><a href="school.html">学校</a></li>
                                <li><a href="https://shenzhen.qfang.com/map/sale">地图找房</a></li>
                            </ul>
                        </li>
                        <li class="navl-li">
                            <a href="newhouseList.html">新房</a>
                            <ul id="navl-ull" style="z-index: 10;">
                                <li><a href="newhouseList.html">楼盘</a></li>
                                <li><a href="https://shenzhen.qfang.com/groupbuy">优惠活动</a></li>
                                <li><a href="https://shenzhen.qfang.com/newhouse/info">资讯</a></li>
                            </ul>
                        </li>
                        <li class="navl-li dawan">
                            <a href="leaseHouseList.html">租房</a>
                            <ul id="navl-ull">
                                <li><a href="leaseHouseList.html">全部房源</a></li>
                                <li><a href="community.html">小区</a></li>
                                <li><a href="https://shenzhen.qfang.com/map/sale">地图找房</a></li>
                            </ul>
                        </li>
                        <li class="navl-li">
                            <a href="javascript:;">写字楼</a>
                            <ul id="navl-ull">
                                <li><a href="https://shenzhen.qfang.com/office/rent">写字楼首页</a></li>
                                <li><a href="https://shenzhen.qfang.com/office/rent">写字楼出租</a></li>
                                <li><a href="https://shenzhen.qfang.com/office/rent">写字楼出售</a></li>
                                <li><a href="https://shenzhen.qfang.com/office/share">共享办公</a></li>
                                <li><a href="https://shenzhen.qfang.com/office/sale">写字楼楼盘</a></li>
                            </ul>
                        </li>
                        <li class="navl-li">
                            <a href="javascript:;">海外</a>
                            <ul id="navl-ull">
                                <li><a href="https://hw.qfang.com/">海外首页</a></li>
                                <li><a href="https://hw.qfang.com/">海外地产</a></li>
                                <li><a href="https://hw.qfang.com/">海外资讯</a></li>
                            </ul>
                        </li>
                        <li class="navl-li">
                            <a href="community.html">小区</a>
                        </li>
                        <li class="navl-li">
                            <a href="https://shenzhen.qfang.com/fangjia">查房价</a>
                        </li>
                        <li class="navl-li">
                            <a href="houseList.html">查成交</a>
                            <ul id="navl-ull" style="z-index: 10;">
                                <li><a href="houseList.html">二手房成交</a></li>
                                <li><a href="leaseHouseList.html">租房成交</a></li>
                            </ul>
                        </li>
                        <li class="navl-li jingji">
                            <a href="javascript:;" class="jingji">经纪人</a>
                            <ul id="navl-ull" style="z-index: 10;">
                                <li><a href="middleman.html">二手房经纪人</a></li>
                                <li><a href="middleman.html">租房经纪人</a></li>
                            </ul>
                        </li>
                        <li class="navl-li">
                            <a href="dawanqu.html">大湾区</a>
                        </li>
                        <li class="navl-li">
                            <a href="https://baike.qfang.com/">指南</a>
                            <ul id="navl-ull" style="z-index: 10;">
                                <li><a href="https://baike.qfang.com/">房产知识</a></li>
                                <li><a href="https://baike.qfang.com/">房产问答</a></li>
                            </ul>
                        </li>
                        <li class="navl-li">
                            <a href="https://shenzhen.qfang.com/trust?type=sale">业主委托</a>
                        </li>
                        <li class="navl-li">
                            <a href="javascript:;">下载APP</a>
                            <div class="erweima" style="z-index: 10;">
                                <img src="../img/dawanqu/微信截图_20210125160640.png" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="navr">
                    <span class="iconfont icon-wode"></span>
                    <a href="javascript:;">登录</a>
                    <i>|</i>
                    <a href="javascript:;">注册</a>
                </div>
            </div>
        </header>
        <!-- 下辖导航 -->
        <div class="logo same">
            <div class="logo_plate">
                <a href="javascript:;"></a>
                <a class="select-city" href="javascript:;">
                    <i class="iconfont iconfuwudizhi"></i>
                    <span class="city">深圳</span>
                </a>
            </div>
            <div class="nav_plate">
                <a :class="{active : currentIndex === 0}" href="leaseHouseList.html">租房</a>
                <a :class="{active : currentIndex === 1}" href="community.html">小区</a>
                <a :class="{active : currentIndex === 2}" href="school.html">学校</a>
                <!-- <a>地图找房</a>     -->
            </div>
            <div class="search-plate">
                <input class="keywords" id="keywords" type="text" placeholder="请输入房源特征、房型、地址或小区名">
                <a class="search-btn" href="javascript:;">
                    <i class="iconfont iconsousuo-search"></i>
                </a>
            </div>
        </div>

        <!-- 过滤条件 -->
        <div class="filtration_wrap">
            <div class="filter_inner">
                <div class="filter_head">
                    <span class="filter_adv"> 真实房源 线上浏览 线下体验</span>
                    <ul class="filter_box">
                        <li class="filter_title">位置</li>
                        <li :class="{ active : condition1 == '' }" @click="chooses('' , 'location' , 0)"
                            class="filter_item">不限</li>
                        <li :class="{ active : condition1 == '南山' }" @click="chooses('南山', 'location' , 0)"
                            class="filter_item">南山</li>
                        <li :class="{ active : condition1 == '福田' }" @click="chooses('福田', 'location' , 0)"
                            class="filter_item">福田</li>
                        <li :class="{ active : condition1 == '罗湖' }" @click="chooses('罗湖', 'location' , 0)"
                            class="filter_item">罗湖</li>
                        <li :class="{ active : condition1 == '宝安' }" @click="chooses('宝安', 'location' , 0)"
                            class="filter_item">宝安</li>
                    </ul>
                    <ul class="filter_box">
                        <li class="filter_title">售价</li>
                        <li :class="{ active : condition2 == '' }" @click="ranges('totalPrice', '', '', 0,'condition2')"
                            class="filter_item">不限</li>
                        <li :class="{ active : condition2 == 200 }"
                            @click="ranges('totalPrice', 0, 200, 0,'condition2')" class="filter_item">两百万元以下</li>
                        <li :class="{ active : condition2 == 300 }"
                            @click="ranges('totalPrice', 200, 300, 0,'condition2')" class="filter_item">200-300万元</li>
                        <li :class="{ active : condition2 == 400 }"
                            @click="ranges('totalPrice', 300, 400, 0,'condition2')" class="filter_item">300-400万元</li>
                        <li :class="{ active : condition2 == 100000 }"
                            @click="ranges('totalPrice', 400, 100000, 0,'condition2')" class="filter_item">400万元以上</li>
                    </ul>
                    <ul class="filter_box">
                        <li class="filter_title">面积</li>
                        <li :class="{ active : condition3 == '' }" @click="ranges('area', '', '', 1,'condition3')"
                            class="filter_item">不限</li>
                        <li :class="{ active : condition3 == '50' }" @click="ranges('area', 0, 50, 1,'condition3')"
                            class="filter_item">50以下</li>
                        <li :class="{ active : condition3 == '70' }" @click="ranges('area', 50, 70, 1,'condition3')"
                            class="filter_item">50-70</li>
                        <li :class="{ active : condition3 == '90' }" @click="ranges('area', 70, 90, 1,'condition3')"
                            class="filter_item">70-90</li>
                        <li :class="{ active : condition3 == '10000' }"
                            @click="ranges('area', 90, 10000, 1,'condition3')" class="filter_item">90以上</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 列表 -->
        <div class="list_wrap">
            <div class="list_inner">
                <div class="list_container">
                    <div class="list_head">
                        <span>共找到资源</span>
                        <span class="list_title">{{ displayList.length }}</span>
                        <span>条</span>
                    </div>


                    <!-- 主要内容列表 -->
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                                role="tab" aria-controls="pills-home" aria-selected="true">默认排序</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                                role="tab" aria-controls="pills-profile" aria-selected="false">面积</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                                role="tab" aria-controls="pills-contact" aria-selected="false">总价</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <!-- 默认排序 -->
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">

                            <div class="list_item" v-for="(item, index) in displayList">
                                <img :src="item.img" alt="" width="240" height="180" style="cursor: pointer;">
                                <div class="item_info">
                                    <div class="infoPrice">
                                        <div class="total_price">{{ item.totalPrice }}万</div>
                                        <div class="unit_price">{{ item.unitPrice }} 元/m<sup>2</sup></div>
                                    </div>
                                    <div class="info_title" @click="godetail(index)">
                                        {{ item.name }}
                                    </div>
                                    <div class="info_info">
                                        <span style="padding-left: 0;">{{ item.houseType }}</span>
                                        <span>{{ item.area }}m<sup>2</sup></span>
                                        <span>{{ item.renovation }}</span>
                                        <span>{{ item.floor }}层</span>
                                        <span>{{ item.orientation }}</span>
                                        <span style="border: 0;">{{ item.years }}</span>
                                    </div>
                                    <div class="location">
                                        {{ item.LocationArea}}
                                    </div>
                                    <div class="info_label">
                                        <span v-for="el in item.houseLable">{{ el }}</span>
                                    </div>
                                </div>
                            </div>


                        </div>


                        <!-- 面积 -->
                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                            aria-labelledby="pills-profile-tab">
                            <div class="list_item" v-for="(item, index) in displayListArea">
                                <img :src="item.img" alt="" width="240" height="180" style="cursor: pointer;">
                                <div class="item_info">
                                    <div class="infoPrice">
                                        <div class="total_price">{{ item.totalPrice }}万</div>
                                        <div class="unit_price">{{ item.unitPrice }} 元/m<sup>2</sup></div>
                                    </div>
                                    <div class="info_title" @click="godetail(index)">
                                        {{ item.name }}
                                    </div>
                                    <div class="info_info">
                                        <span style="padding-left: 0;">{{ item.houseType }}</span>
                                        <span>{{ item.area }}m<sup>2</sup></span>
                                        <span>{{ item.renovation }}</span>
                                        <span>{{ item.floor }}层</span>
                                        <span>{{ item.orientation }}</span>
                                        <span style="border: 0;">{{ item.years }}</span>
                                    </div>
                                    <div class="location">
                                        {{ item.LocationArea}}
                                    </div>
                                    <div class="info_label">
                                        <span v-for="el in item.houseLable">{{ el }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- 总价 -->
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                            aria-labelledby="pills-contact-tab">
                            <div class="list_item" v-for="(item, index) in displayListPrice">
                                <img :src="item.img" alt="" width="240" height="180" style="cursor: pointer;">
                                <div class="item_info">
                                    <div class="infoPrice">
                                        <div class="total_price">{{ item.totalPrice }}万</div>
                                        <div class="unit_price">{{ item.unitPrice }} 元/m<sup>2</sup></div>
                                    </div>
                                    <div class="info_title" @click="godetail(index)">
                                        {{ item.name }}
                                    </div>
                                    <div class="info_info">
                                        <span style="padding-left: 0;">{{ item.houseType }}</span>
                                        <span>{{ item.area }}m<sup>2</sup></span>
                                        <span>{{ item.renovation }}</span>
                                        <span>{{ item.floor }}层</span>
                                        <span>{{ item.orientation }}</span>
                                        <span style="border: 0;">{{ item.years }}</span>
                                    </div>
                                    <div class="location">
                                        {{ item.LocationArea}}
                                    </div>
                                    <div class="info_label">
                                        <span v-for="el in item.houseLable">{{ el }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_adv">
                    <div class="img">
                        <img src="https://shenzhen.qfang.com/themes/default/images/frontend/listings/banner-sale.png"
                            alt="" srcset="">
                    </div>
                    <div class="img">
                        <img src="https://i.qfangimg.com/resource/qfang-web/img/yga.png" alt="" srcset="">
                    </div>
                    <div class="guess">
                        <div class="guess_head">
                            猜你喜欢
                        </div>
                        <div class="guess_list">
                            <div class="guess_item" v-for="item in allList">
                                <div class="guess_img">
                                    <img width="70" height="70"
                                        src="https://saas-qw.qfangimg.com/pro/3c29ed17-4b60-4251-b971-88432031d877.jpg-120x120"
                                        alt="">
                                </div>
                                <div class="guess_info">
                                    <div class="guess_title">{{ item.name }}</div>
                                    <div class="guess_contain">
                                        <span>{{ item.houseType }}</span>
                                        <span>{{ item.area }}平</span>
                                    </div>
                                    <div class="guess_price">
                                        <span style="font-family: dinot-bold,Microsoft YaHei,微软雅黑;">{{ item.totalPrice
                                            }}</span>

                                        <span style="font-size: 12px; margin-left:-4px">万</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/login.js"></script>
    <!-- <script src="../js/getList.js"></script> -->
    <script>
        var app = new Vue({
            el: '#vue',
            data: {
                allList: [],
                displayList: [],
                displayListArea: [],
                displayListPrice: [],
                resource: '../../php/getLeaseHouse.php',
                currentIndex: 0,
                condition1: '',
                condition2: '',
                condition3: '',
                condition4: '',
                Conditions: {
                    ranges: [
                        //  {
                        //     type: 'area',
                        //     low: 100,
                        //     high: 150
                        // }
                        {
                            // type: 'totalPrice',
                            // low:0,
                            // high:200
                        },
                        {},
                        {}
                    ],
                    chooses: [
                        {

                        },
                    ]
                }
            },
            mounted() {
                this.doAjax()
                // this.allList.forEach(element => {
                //     this.displayList.push(element)
                // });
            },
            methods: {
                changeResource(e, str, int) {
                    this.resource = str;
                    this.currentIndex = int
                    e.srcElement.classList.add('active')
                    this.doAjax()
                    this.allList.forEach(element => {
                        this.displayList.push(element)
                    });
                },
                doAjax() {
                    let that = this;
                    axios.get(that.resource)
                        .then(function (res) {
                            that.allList = res.data
                            console.log(that.allList)
                            that.allList.forEach(element => {
                                element.houseLable = element.houseLable.split(' ')
                            });


                            that.doFilter()

                        })
                },
                godetail(i) {
                    localStorage.setItem('QfangItem', JSON.stringify(this.displayList[i]))
                    location.href = this.displayList[i].type + 'details.html'
                },
                doFilter() {
                    $(".tab-pane.fade.active").animate({ opacity: 0 }, 'fast');
                    let products = this.allList
                    // 根据条件循环调用筛选器里的方法
                    for (key in this.Conditions) {
                        // 判断是否有需要的过滤方法
                        if (ProductFilters.hasOwnProperty(key + 'Filter') && typeof ProductFilters[key + 'Filter'] === 'function') {
                            products = ProductFilters[key + 'Filter'](products, this.Conditions[key]);
                        }
                    }

                    $(".tab-pane.fade.active").animate({ opacity: 1 }, 'fast');
                    this.displayList = products
                    this.sort()
                },
                sort() {
                    this.displayListArea = [...this.displayList]
                    this.displayListPrice = [...this.displayList]
                    function sortBy(props) {
                        return function (a, b) {
                            return a[props] - b[props];
                        }
                    }
                    this.displayListArea.sort(sortBy('area'));
                    this.displayListPrice.sort(sortBy('totalPrice'))
                   
                },
                chooses(str, type, rank) {
                    this.condition1 = str
                    if (str) {
                        this.Conditions.chooses[rank] = {
                            type: type,
                            value: str
                        }
                    } else {
                        this.Conditions.chooses[rank] = {}
                    }
                    this.doFilter()
                },
                ranges(type, low, high, rank, str) {
                    this[str] = high
                    if (high) {
                        this.Conditions.ranges[rank] = {
                            type: type,
                            low: low,
                            high: high
                        }
                    } else {
                        this.Conditions.ranges[rank] = {}
                    }
                    this.doFilter()
                }
            },
        })
    </script>
    <footer>
        <div id="bottom">
            <div class="bottombx">
                <div class="footer-text">
                    Q房网深圳新房网，为您提供深圳紫园云墅新房，深圳紫园云墅新楼盘信息，包括深圳新开楼盘价格、新楼盘开盘动态、新房房价走势信息等。VR找房、房贷计算器、房价走势等功能，帮您快速找房。查看更多深圳新房请上Q房网房产信息平台。手机版：
                    <a class="link" href="javascript:;">深圳紫园云墅新房
                    </a>
                </div>
                <div class="regard">
                    <p class="regardleft">
                        <a href="javascript:;">关于Q房</a>
                        <a href="javascript:;">人才招聘</a>
                        <a href="javascript:;">联系我们</a>
                        <a href="javascript:;">用户协议</a>
                        <a href="javascript:;">友情链接</a>
                        <a href="javascript:;">网站地图</a>
                        <a href="javascript:;">新上房源</a>
                        <a href="javascript:;">房产知识</a>
                        <a href="javascript:;">房产问答</a>
                        <a href="javascript:;">房产二手房</a>
                        <a href="javascript:;">热门租房</a>
                        <a href="javascript:;">热门新房</a>
                    </p>
                    <p class="regardRight">
                        <img src="../img/bottomtab_03.png" alt="">
                    </p>
                </div>
                <!-- 新房推荐 -->
                <div class="bottomxxka">
                    <p class="btControl">
                        <a href="javascript:;">新房推荐</a>
                    </p>
                    <div class="items  clearfix">
                        <a href="/newhouse/200062304" target="_blank">三正鹏程上花园新房</a>
                        <a href="/newhouse/110000805" target="_blank">融创都会新房</a>
                        <a href="/newhouse/110001318" target="_blank">远洋新干线二期新房</a>
                        <a href="/newhouse/110000798" target="_blank">合正城市广场新房</a>
                        <a href="/newhouse/1102273" target="_blank">奥林华府一期新房</a>
                        <a href="/newhouse/3507069" target="_blank">壹锦园新房</a>
                        <a href="/newhouse/3516113" target="_blank">中海云麓花园新房</a>
                        <a href="/newhouse/1103375" target="_blank">颐安都会中央2期 新房</a>
                        <a href="/newhouse/3516139" target="_blank">御景蓝湾公馆新房</a>
                        <a href="/newhouse/3506597" target="_blank">嘉亿爵悦新房</a>
                        <a href="/newhouse/3512167" target="_blank">星河上寓新房</a>
                        <a href="/newhouse/100000039" target="_blank">佳兆业未来城新房</a>
                        <a href="/newhouse/1102284" target="_blank">鸿威de森林新房</a>
                        <a href="/newhouse/1100739" target="_blank">百合盛世新房</a>
                        <a href="/newhouse/1103684" target="_blank">东都花园新房</a>
                        <a href="/newhouse/1103658" target="_blank">万科广场新房</a>
                        <a href="/newhouse/100000255" target="_blank">琳珠华庭新房</a>
                        <a href="/newhouse/3507988" target="_blank">三正瑞士公馆新房</a>
                        <a href="/newhouse/1103709" target="_blank">海航城新房</a>
                        <a href="/newhouse/3508071" target="_blank">朗泓龙园大观新房</a>
                    </div>
                </div>
                <!-- 检索 -->
                <div class="retrieval">
                    <ul>
                        <li class="botjs">
                            按字母检索：
                            <a href="javascript:;" class="items">A</a>
                            <a href="javascript:;" class="items">B</a>
                            <a href="javascript:;" class="items">C</a>
                            <a href="javascript:;" class="items">D</a>
                            <a href="javascript:;" class="items">E</a>
                            <a href="javascript:;" class="items">F</a>
                            <a href="javascript:;" class="items">G</a>
                            <a href="javascript:;" class="items">H</a>
                            <a href="javascript:;" class="items">I</a>
                            <a href="javascript:;" class="items">J</a>
                            <a href="javascript:;" class="items">K</a>
                            <a href="javascript:;" class="items">L</a>
                            <a href="javascript:;" class="items">M</a>
                            <a href="javascript:;" class="items">N</a>
                            <a href="javascript:;" class="items">O</a>
                            <a href="javascript:;" class="items">P</a>
                            <a href="javascript:;" class="items">Q</a>
                            <a href="javascript:;" class="items">R</a>
                            <a href="javascript:;" class="items">S</a>
                            <a href="javascript:;" class="items">T</a>
                            <a href="javascript:;" class="items">U</a>
                            <a href="javascript:;" class="items">V</a>
                            <a href="javascript:;" class="items">W</a>
                            <a href="javascript:;" class="items">S</a>
                            <a href="javascript:;" class="items">Y</a>
                            <a href="javascript:;" class="items">Z</a>
                        </li>
                        <li class="botbera fl">
                            Copyright。2013~2021 qfang.com All Rights Reserved ICP备案号:粤ICP备05067219号

                        </li>
                        <div class="ebsgovicon" id="ebsgoviconParent">
                            <a href="https://szcert.ebs.org.cn/A62A7CBC-957D-4104-A773-090987C97144" target="_blank">
                                <img src="../img/govIcon.gif" title="深圳市市场监督管理局企业主体身份公示" alt="深圳市市场监督管理局企业主体身份公示" width="20" height="27.5">
                            </a>
                        </div>
                        <li>
                            公司名称:深圳市云房网络科技有限公司
                        </li>

                    </ul>
                </div>
            </div>
    </footer>
</body>

</html>